<template>
    <div class="inner-warp">
        <MainTitleVue title="消息中心" />
        <n-button size="tiny" tertiary round class="clear-allnotify" @click="readAll">
            <template #icon>
                <n-icon>
                    <clear-icon />
                </n-icon>
            </template>全部已读
        </n-button>
        <n-divider style="width: 0;" />
        <n-empty size="huge" description="暂无消息" v-if="data.length === 0"></n-empty>
        <div class="sub-warp">
            <NotificationItem
                v-for="(item, index) in data"
                :key="index"
                :info="item"
                :index="index"
                @deleteNotify="deleteNotify"
            />
        </div>
        <n-divider title-placement="center" v-if="max_length < data.length">
            <n-button round color="#333333" size="small" @click="getMore">查看更多</n-button>
        </n-divider>
    </div>
</template>

<script setup lang='ts'>
import MainTitleVue from "@/components/common/MainTitle.vue";
import NotificationItem from "@/views/user/components/NotificationItem.vue";
import { CleaningServicesRound as ClearIcon } from '@vicons/material'
import { useDialog, useMessage } from "naive-ui";
import { getCurrentInstance, onMounted, ref } from "vue";

// api访问代理
const { proxy } = getCurrentInstance() as any

// 声明 dialog 对象
const dialog = useDialog()

// 引入消息函数
const message = useMessage()

// 消息列表
let data = ref([])

// 最多显示消息数
let max_length = ref(10)

onMounted(() => {
    getNotify()
})

const getNotify = (() => {
    proxy.$api.user.getMyNotification().then((result: any) => {
        if (result.success) {
            data.value = result.data
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

const deleteNotify = ((id: any, index: any) => {
    dialog.info({
        title: '已读消息',
        content: '是否要标为已读？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            proxy.$api.user.checkMyNotification({ id: id }).then((result: any) => {
                if (result.success) {
                    (data.value as any)[index].is_read = true
                    message.success("已读消息")
                } else {
                    message.warning(result.msg)
                }
            }).catch(() => {
                message.error('未知错误')
            });
        }
    })
})

// 全部标为已读
const readAll = (() => {
    dialog.warning({
        title: '全部已读消息',
        content: '是否要将全部消息标为已读？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            proxy.$api.user.checkAll().then((result: any) => {
                if (result.success) {
                    data.value.forEach(element => {
                        (element as any).is_read = true
                    });
                    message.success("已全部标为已读")
                } else {
                    message.warning(result.msg)
                }
            }).catch(() => {
                message.error('未知错误')
            });
        }
    })
})

// 查看更多
const getMore = (() => {
    max_length.value += 10
})

</script>

<style scoped>
.inner-warp {
    margin: 50px auto;
    width: 1100px;
}

.sub-warp {
    column-gap: 10px;
    column-count: 2;
}

.clear-allnotify {
    float: right;
}
</style>